<template>
	<view>
		<view class="userinfo">
			<view v-if="userInfo.image" class="pic">
				<uv-image shape="circle" :src="userInfo.image" width="80px" height="80px"></uv-image>
			</view>
			<view v-else class="pic">
				<uv-image shape="circle" src="/static/user.jpg" width="80px" height="80px"></uv-image>
			</view>
			<view v-if="userInfo.nickName" class="">
				{{userInfo.nickName}}
			</view>
			<view v-else class="">
				大幕孤烟直
			</view>
		</view>
		<uv-list>
			<uv-list-item @click="toUserInfo" title="个人信息" border show-extra-icon :extra-icon="{icon:'list-dot',color:'#6ECEB0'}" link>
			</uv-list-item>
			<uv-list-item @click="myOrder" title="我的预约" border show-extra-icon :extra-icon="{icon:'order',color:'#6ECEB0'}" link>
			</uv-list-item>
			<uv-list-item @click="breakOut" title="签到记录" border show-extra-icon
				:extra-icon="{icon:'tags',color:'#6ECEB0'}" link>
			</uv-list-item>
			<uv-list-item @click="suggestion" title="意见反馈" border show-extra-icon
				:extra-icon="{icon:'email',color:'#6ECEB0'}" link>
			</uv-list-item>
			<uv-list-item @click="updateBtn" title="修改密码" border show-extra-icon
				:extra-icon="{icon:'edit-pen',color:'#6ECEB0'}" link>
			</uv-list-item>
			<uv-list-item @click="toLogin" title="退出登录" border show-extra-icon
				:extra-icon="{icon:'close',color:'#6ECEB0'}" link>
			</uv-list-item>
			<uv-list-item>
				<uv-line></uv-line>
			</uv-list-item>
		</uv-list>
	</view>
</template>

<script setup>
	import {onShow} from '@dcloudio/uni-app'
import { reactive } from 'vue';
	import {getStuByIdApi} from '../../api/index.js'
	//用户信息
	const userInfo = reactive({})
	//个人信息
	const toUserInfo = ()=>{
		uni.navigateTo({
			url: '../my_info/my_info?user='+JSON.stringify(userInfo)
		})
	}
	//我的预约
	const myOrder = () => {
		uni.navigateTo({
			url: '../order/order'
		})
	}
	//违约记录
	const breakOut = () => {
		uni.navigateTo({
			url: '../back_out/back_out'
		})
	}
	//修改密码
	const updateBtn = () => {
		uni.navigateTo({
			url: '../update_password/update_password'
		})
	}
	//意见反馈
	const suggestion = () => {
		uni.navigateTo({
			url: '../suggestion/suggestion'
		})
	}
	//退出登录
	const toLogin = () => {
		//清空缓存
		uni.clearStorage()
		//跳转登录
		uni.reLaunch({
			url: "../login/login"
		})
	}
	
	//根据用户id查询用户信息
	const getStuById = async()=>{
		let res = await getStuByIdApi(uni.getStorageSync("userId"))
		if(res && res.code == 200){
			console.log(res.data)
			Object.assign(userInfo,res.data)
		}
	}
	onShow(()=>{
		getStuById()
	})
</script>

<style>
	page {
		background-color: #FFF;
	}

	:deep(.uv-list-item__content-title) {
		font-size: 32rpx !important;
		padding: 10rpx 0rpx !important;
	}

	:deep(.uv-icon__icon) {
		font-size: 20px !important;
	}

	:deep(.uv-icon) {
		padding-right: 10px !important;
	}

	:deep(.uv-list-item__icon) {
		margin-right: 0px !important;
	}
</style>
<style scoped lang="scss">
	.userinfo {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 40rpx;
	}
</style>
